<template>
  <div>
    <Breadcrumb>
      <BreadcrumbItem>订单管理</BreadcrumbItem>
      <BreadcrumbItem>普通订单</BreadcrumbItem>
    </Breadcrumb>
    <Form ref="formInline" :model="request" inline>
      <FormItem>
        <Input
          type="text"
          v-model="params.user_id"
          clearable
          placeholder="请输入用户"
        />
      </FormItem>
      <FormItem>
        <Input
          type="text"
          v-model="params.order_id"
          clearable
          placeholder="请输入订单编号"
        />
      </FormItem>
      <FormItem>
        <Input
          type="text"
          v-model="params.activity_id"
          clearable
          placeholder="请输入活动编号"
        />
      </FormItem>
      <FormItem>
        <DatePicker
          type="daterange"
          v-model="params.device_time"
          @on-change="timechange"
          :transfer="true"
          placement="bottom-end"
          placeholder="请选择开始-结束时间"
          style="width: 200px"
        ></DatePicker>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="search" style="margin-right: 10px"
          >搜索</Button
        >
      </FormItem>
    </Form>
    <div>
      <Table :columns="columns1" :data="tableData" :height="height">
        <template slot-scope="{ row }" slot="status">
          <span class="success" v-if="row.status === '1'">正常</span>
          <span class="error" v-else>异常</span>
        </template>
        <template slot-scope="{ row }" slot="order_name">
          <span>{{ row.order_name[0] }}</span>
        </template>
        <template slot-scope="{ row }" slot="is_push">
          <span class="success" v-if="row.is_push == 2">完成</span>
          <span class="error" v-else>未完成</span>
        </template>
        <template slot-scope="{ row }" slot="option">
         <Button
            type="primary"
            size="small"
            style="margin-right: 5px"
             v-hasPermission="['37']"
            @click="goDel(row.id)"
            >查看</Button
          >
        </template>
      </Table>
    </div>

    <div style="display: flex; justify-content: center; margin-top: 24px">
      <Page
        background
        layout="prev, pager, next"
        :page-size="params.limit"
        :total="total"
        @on-change="handleCurrentChange"
        :current-page="params.page"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      params: {
        device_time: [],
        status: 1,
        user_id: "",
        order_id: "",
        activity_id: "",
        page: 1,
        limit: 10,
      },
      total: 0,
      page: {},
      height: this.$store.state.height,
      modal1: false,
      data1: [
        {
          id: 1,
          title: "机器组3",
        },
        {
          id: 2,
          title: "机器组4",
        },
      ],
      request: {
        device_number: "",
        page: 1,
      },
      columns1: [
        {
          title: "用户",
          key: "user_id",
          minWidth: 150,
          align: "center",
        },
        {
          title: "商品名称",
          key: "order_name",
          minWidth: 300,
          align: "center",
        },
        {
          title: "价格",
          key: "order_money",
          minWidth: 150,
          align: "center",
        },

        {
          title: "是否异常",
          slot: "status",
          minWidth: 150,
          align: "center",
        },
        {
          title: "是否完成",
          slot: "is_push",
          minWidth: 150,
          align: "center",
        },
        {
          title: "订单编号",
          key: "order_id",
          minWidth: 150,
          align: "center",
        },
        {
          title: "活动编号",
          key: "activity_id",
          minWidth: 150,
          align: "center",
        },
        {
          title: "设备编号",
          key: "device_id",
          minWidth: 150,
          align: "center",
        },

        {
          title: "创建时间",
          key: "create_time",
          minWidth: 160,
          align: "center",
        },

        {
          title: "操作",
          slot: "option",
          width: 200,
          align: "center",
          fixed: "right",
        },
      ],
      tableData: [],
      role_id:null,
    };
  },
  mounted() {

    this.init();
  },
  methods: {
    init() {
      this.axios.post("order/order_list", this.params).then((res) => {
        console.log("this.params: ", this.params);
        if (res.code == 1) {
          console.log(res);
          this.total = res.data.count;
          this.tableData = res.data.list;
        }
      });
    },
    goDel(id) {
      this.$router.push({ path: "/order/detail", query: { id } });
    },
    search() {
      this.params.page = 1;
      this.init();
    },
    confirm() {
      this.modal1 = false;
      this.$Message.success("保存成功！");
      this.cancel();
    },
    cancel() {},
    add() {
      this.modal1 = true;
    },
    setStatus(id, status) {
      var text = "确定要" + (status == 1 ? "启用" : "禁用") + "此机器组么？";
      this.$Modal.confirm({
        title: text,
        onOk: () => {
          this.$Message.success("操作成功");
        },
        onCancel: () => {},
      });
    },
    lists() {},
    timechange(val) {
      console.log(val);
    },
    handleSizeChange(val) {
      this.request.page = 1;
      this.request.limit = val;
      this.lists();
    },
    handleCurrentChange(val) {
      this.params.page = val;
      this.init();
    },
  },
};
</script>

<style>
</style>
